<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>班级信息管理平台</title>
    <link rel="stylesheet" href="./lib/bootstrap.min.css">
    
</head>
<body>
    <div id="app" class='container'>
        <!-- 创建表头 -->
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">
                    班级信息管理平台
                </h3>
            </div>
            <div v-show="isShow" class="panel-body form-inline" >
                <button type="button" class="btn btn-primary" @click="isShow = false">添加学员</button>
                <input type="text" class="form-control pull-right" placeholder="学生查询" v-model="str" v-focus>
            </div>
            <div class="panel-body form-inline" >
                <div class="row" style="margin-bottom: 20px">
                    <div class="form-group col-md-4">
                        <label class="sr-only"></label>
                        <div class="input-group">
                            <div class="input-group-addon">姓名</div>
                            <input type="text" class="form-control"  v-model="user.name">
                        </div>
                    </div>
                </div> 
                <div class="text-right">
                    <input type="button" value="添加" class="btn btn-primary" @click="add">
                </div>
                
            </div>
        </div>
             <!-- 创建表 -->
        <table class="table  table-hover">
            <thead>
                <tr class="info">
                    <th><input type="checkbox"></th>
                    <th>姓名</th>
                    <th>学号</th>
                    <th>手机号</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>专业</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in search()" :key="index">
                    <td><input type="checkbox"></td>
                    <td v-for="i in item">{{i}}</td>
                    <td>
                        <!-- Bootstrap modal组件，弹出模态框 --> 
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editModal" @click="edit(index)">编辑</button>
                        <button type="button" class="btn btn-danger" @click="del(index)">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
        
        <!-- 模态框内容 -->
        <div class="modal" id="editModal" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content modalContent">
                    <div class="modal-body">
                        <!-- input group组件 -->
                        <div class="row" style="margin-bottom: 20px">
                            <div class="form-group col-md-4">
                                <label class="sr-only"></label>
                                <div class="input-group">
                                    <div class="input-group-addon">姓名</div>
                                    <input type="text" class="form-control"  v-model="editStu.name">
                                </div>
                            </div>
                            <div class="form-group col-md-4">
                                <label class="sr-only"></label>
                                <div class="input-group">
                                    <div class="input-group-addon">学号</div>
                                    <input type="text" class="form-control"  v-model="editStu.studentNum">
                                </div>
                            </div>
                            <div class="form-group col-md-4">
                                <label class="sr-only"></label>
                                <div class="input-group">
                                    <div class="input-group-addon">手机号</div>
                                    <input type="text" class="form-control"  v-model="editStu.tel">
                                </div>
                            </div>
                        </div>
                        <div class="row" style="margin-bottom: 20px">
                            <div class="form-group col-md-4">
                                <label class="sr-only"></label>
                                <div class="input-group">
                                    <div class="input-group-addon">性别</div>
                                    <select class="form-control"  v-model="editStu.sex">
                                    <option value="男">男</option>
                                    <option value="女">女</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group col-md-4">
                                <label class="sr-only"></label>
                                <div class="input-group">
                                    <div class="input-group-addon">年龄</div>
                                    <input type="text" class="form-control"  v-model="editStu.age">
                                </div>
                            </div>
                            <div class="form-group col-md-4">
                                <label class="sr-only"></label>
                                <div class="input-group">
                                    <div class="input-group-addon">专 业</div>
                                    <input type="text" class="form-control"  v-model="editStu.major">
                                </div>
                            </div>
                        </div> 
                    </div>
                    <div class="modal-footer">
                        <!-- 提交按钮绑定click事件 -->
                        <button class="btn btn-primary" @click.stop="onSubmit">确定</button>
                        <button class="btn btn-secodary" data-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>
       
    </div>
</body>
<script src="./lib/jquery.js"></script>
<script src="./lib/bootstrap.min.js"></script>
<script src="./lib/vue.js"></script>
<script>
    //由于本案未在vue中引入jquery，所以要将关闭模态框的modal()方法重新定义一个js方法
    var mh = {
        modalHide: function(){
            $('#editModal').modal('hide');
        }
    };
    Vue.directive('focus', {
        inserted:function(el){
            el.focus();
        }
    })
    var vm = new Vue({
        el:'#app',
        data:{
            user:{
                name:'',
                studentNum:'',
                tel:'',
                sex:'男',
                age:'',
                major:''
            },
            studentInfor: [
                {name:'张三',studentNum:'001',tel:'13289069832',sex:'男',age:20,major:'英语'},
                {name:'张三丰',studentNum:'002',tel:'13289069832',sex:'男',age:20,major:'汉语'},
                {name:'张无忌',studentNum:'003',tel:'13289069832',sex:'男',age:19,major:'软件'},
                {name:'周芷若',studentNum:'004',tel:'13289069832',sex:'女',age:18,major:'网络'}
            ],
            isShow:true,
            str:'',
            editStu: {
                name:'',
                studentNum:'',
                tel:'',
                sex:'',
                age:'',
                major:''
            },
            beforeIndex:0
        },
        methods:{
            add(){
                var user = {};
                for(var i in this.user){
                    if(!this.user[i]){
                        return;
                    }
                    user[i] = this.user[i];
                }
                console.log(user);
                this.studentInfor.push(user);
                for(var i in this.user){
                   this.user[i] = ''
                }
                this.user['sex'] = '男';
                this.isShow = true;
            },
            del(index){
                
            },
            search(){
              
            },
            edit(index){
                this.editStu = this.studentInfor[index];
                this.beforeIndex = index;
            },
            onSubmit(){
                for(var i = 0; i < this.studentInfor.length; i++){
                    if(i == this.beforeIndex){
                        this.studentInfor[i] =  this.editStu;
                    }
                }
                mh.modalHide();    //同时关闭模态框
            }
        }
    })
</script>
</html>